<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">DataTable - SubTable</h1>
		<div class="entry">
			<p>SubTable is a helper component of datatable used for grouping.</p>

            <h:form id="form">
                <p:dataTable id="playersTable" var="player" value="#{tableBean.players}">

                    <f:facet name="header">
                        FCB Statistics
                    </f:facet>

                    <p:columnGroup type="header">
                        <p:row>
                            <p:column rowspan="2" headerText="Player" />
                            <p:column colspan="2" headerText="Stats" />
                        </p:row>
                        
                        <p:row>
                            <p:column headerText="Goals" />
                            <p:column headerText="Assists" />
                        </p:row>
                    </p:columnGroup>

                    <p:subTable var="stats" value="#{player.stats}">
                        <f:facet name="header">
                          #{player.name} 
                        </f:facet>
                        
                        <p:column>
                            #{stats.season}
                        </p:column>
                        
                        <p:column>
                            #{stats.goals}
                        </p:column>
                        
                        <p:column>
                            #{stats.assists}
                        </p:column>
                        
                        <p:columnGroup type="footer">
                            <p:row>
                                <p:column footerText="Totals: " style="text-align:right"/>
                                <p:column footerText="#{player.allGoals}" />
                                <p:column footerText="#{player.allAssists}" />
                            </p:row>
                        </p:columnGroup>
                    </p:subTable>
                </p:dataTable>
            </h:form>

		<h3>Source</h3>
		<p:tabView>
			<p:tab title="datatableSubTable.xhtml">
                <pre name="code" class="xml">
&lt;h:form id="form"&gt;
    &lt;p:dataTable id="playersTable" var="player" value="\#{tableBean.players}"&gt;

        &lt;f:facet name="header"&gt;
            FCB Statistics
        &lt;/f:facet&gt;

        &lt;p:columnGroup type="header"&gt;
            &lt;p:row&gt;
                &lt;p:column rowspan="2" headerText="Player" /&gt;
                &lt;p:column colspan="2" headerText="Stats" /&gt;
            &lt;/p:row&gt;

            &lt;p:row&gt;
                &lt;p:column headerText="Goals" /&gt;
                &lt;p:column headerText="Assists" /&gt;
            &lt;/p:row&gt;
        &lt;/p:columnGroup&gt;

        &lt;p:subTable var="stats" value="\#{player.stats}"&gt;
            &lt;f:facet name="header"&gt;
              \#{player.name} 
            &lt;/f:facet&gt;

            &lt;p:column&gt;
                \#{stats.season}
            &lt;/p:column&gt;

            &lt;p:column&gt;
                \#{stats.goals}
            &lt;/p:column&gt;

            &lt;p:column&gt;
                \#{stats.assists}
            &lt;/p:column&gt;

            &lt;p:columnGroup type="footer"&gt;
                &lt;p:row&gt;
                    &lt;p:column footerText="Totals: " style="text-align:right"/&gt;
                    &lt;p:column footerText="\#{player.allGoals}" /&gt;
                    &lt;p:column footerText="\#{player.allAssists}" /&gt;
                &lt;/p:row&gt;
            &lt;/p:columnGroup&gt;
        &lt;/p:subTable&gt;
    &lt;/p:dataTable&gt;
&lt;/h:form&gt;
				</pre>
			</p:tab>

			<p:tab title="TableBean.java">
                <pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import org.primefaces.examples.domain.Player;
import org.primefaces.examples.domain.Stats;

public class TableBean implements Serializable {
	
    private List&lt;Player&gt; players;

	public TableBean() {
        populatePlayers();
	}

    public void populatePlayers() {
        players = new ArrayList&lt;Player&gt;();
        
        Player messi = new Player("Messi", 10);
        messi.getStats().add(new Stats("2005-2006", 4, 2));
        messi.getStats().add(new Stats("2006-2007", 10, 7));
        messi.getStats().add(new Stats("2007-2008", 16, 10));
        messi.getStats().add(new Stats("2008-2009", 32, 15));
        messi.getStats().add(new Stats("2009-2010", 51, 22));
        messi.getStats().add(new Stats("2010-2011", 55, 30));
        players.add(messi);
        
        Player xavi = new Player("Xavi", 6);
        xavi.getStats().add(new Stats("2005-2006", 6, 15));
        xavi.getStats().add(new Stats("2006-2007", 10, 20));
        xavi.getStats().add(new Stats("2007-2008", 12, 22));
        xavi.getStats().add(new Stats("2008-2009", 9, 24));
        xavi.getStats().add(new Stats("2009-2010", 8, 21));
        xavi.getStats().add(new Stats("2010-2011", 10, 25));
        players.add(xavi);
        
        Player iniesta = new Player("Iniesta", 10);
        iniesta.getStats().add(new Stats("2005-2006", 4, 12));
        iniesta.getStats().add(new Stats("2006-2007", 7, 9));
        iniesta.getStats().add(new Stats("2007-2008", 10, 14));
        iniesta.getStats().add(new Stats("2008-2009", 15, 17));
        iniesta.getStats().add(new Stats("2009-2010", 14, 16));
        iniesta.getStats().add(new Stats("2010-2011", 17, 22));
        players.add(iniesta);
    }

    public List&lt;Player&gt; getPlayers() {
        return players;
    }
}
				</pre>
			</p:tab>
		</p:tabView>
	       </div>

	</ui:define>
</ui:composition>